<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>函数的封装</title>
    <style>

    </style>
</head>
<body>
<div></div>
<p></p>
<span></span>
<div></div>
<p></p>
<span></span>
<script>

    //怎么实现链式编程，是一个对象要调用方法
    //让选择器的方法 让伪数组拥有each方法
   /* function select(selector){
        return document.querySelectorAll(selector);//返回一个伪数组
    }


    function each(arr,callback){
        for(var i=0;i<arr.length;i++){
            callback(arr[i],i);
        }
    }

    var nodes =  select('div,p');
    each(nodes,function(v){
        v.style.border= v.nodeName=='DIV'?'2px dashed red':'5px dashed green';
    });*/

    //选择函数封装
   /* function select(selector){
        return document.querySelectorAll(selector);
    }
    //循环封装
    function each(arr,callbanck){
        for(var i=0;i<arr.length;i++){
            callbanck(arr[i],i);
        }
    }

    //函数调用
    var nodes = select('div,p');
    each(nodes,function(v){
        v.style.border= v.nodeName=='DIV'?'3px solid yellow':'1px solid green';
    })*/

    //标签选择函数
   /* function select(selector){
        return document.querySelectorAll(selector);
    }
    //遍历循环封装
    function each(arr,callback){
        for(var i=0;i<arr.length;i++){
            callback(arr[i],i);
        }
    }

    //函数调用
    var nodes = select('div,p');
    each(nodes,function(v){
        v.style.border= v.nodeName=='DIV'?'6px dashed purple':'3px dotted orange';
    });*/

    /*function select(selector){
        return document.querySelectorAll(selector);
    }

    function each(arr,callback){
        for(var i=0;i<arr.length;i++){
            callback(arr[i],i);
        }
    };

    var nodes = select('div,p');//伪数组
    each(nodes,function(v,i){
        v.style.border= v.nodeName=='DIV'?'1px solid deeporange':'2px dotted yellowgreen';
    });*/


    function select(selector){
        return document.querySelectorAll(selector);
    }
    function each(arr,callback){
        for(var i=0;i<arr.length;i++ ){
            callback(arr[i],i);
        }
    }
    var nodes = select('div,p');
    each(nodes,function(v,i){
        v.style.border= v.nodeType=='P'?'1px solid orange':'3px dashed red';

    });
//    select('div,p').each(function(v){
//        v.style.border= v.nodeType=='P'?'1px solid orange':'3px dashed red';
//    });///错啦
</script>
</body>
</html>